@import "common.scss";
@import "color.scss";

@keyframes fade-in {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@-webkit-keyframes fade-in {
	0% {
		-webkit-transform: translateY(20px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

.note-blur {
	filter: blur(0.7px);
	-webkit-filter: blur(0.7px);
	opacity: 0.8;
}

.note-root {
	flex: 1 1 auto;
	height: 100%;
	overflow: hidden;
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	background-color: $rootBg;
	position: relative;

	&.write {
		.markdown {
			margin-left: 28rem;
		}
	}

	h3 {
		font-weight: normal;
	}

	.note-toolbar {
		flex: 0 0 2.4rem;
		width: 100%;
		@include display-flex;
		-webkit-app-region: drag;

		&.write {
			.search-root, .title {
				flex: 0 0 0;
			}
			.tools {
				flex-basis: 100%;
			}
		}

		.search-wrapper {
			width: 12rem;
		}

		.search-root {
			flex: 0 0 13rem;
			text-align: center;
			padding: 0.3rem 0;
			overflow: hidden;
			transition: flex-basis ease 0.5s;

			.ant-input {
				height: 1.8rem;
				font-size: 0.9rem;
			}
		}

		.title {
			flex: 1 1 auto;
			@include text-ellipsis;
			line-height: 2.4rem;
			font-size: 1.2rem;
			color: $noteTitleColor;
			margin: 0;
			transition: flex-basis ease 0.5s;
		}

		.tools {
			flex-basis: 40%;
			text-align: right;
			padding-right: 1.4rem;

			.tools-item {
				position: relative;
				border-radius: 5px;
				display: inline-block;
				width: 3rem;
				height: 1.8rem;
				line-height: 1.8rem;
				margin: 0.3rem .2rem auto .2rem;
				text-align: center;
				background-color: #ffffff;
				border: 1px solid #d6d5d7;
				text-align: center;
				margin-right: 0.3em;
				&:last-child {
					margin-right: 0;
				}

				&.y-font-icon {
					vertical-align: bottom;
					.anticon {
						font-size: 1.25em;
						line-height: 2rem;
						color: #727272;

						&.anticon-loading {
							font-size: 1.3rem;
						}
					}
				}

				.tools-item-svg {
					margin-top: 0.35rem;
					width: 1.3rem;
					height: 1.3rem;
					display: inline-block;
					stroke: rgba(0, 0, 0, 0.65);
				}
			}
		}
	}

	.note-root-cont {
		flex: 1 1 auto;
		@include display-flex;
	}

	.project-explorer {
		flex: 0 0 13rem;
		overflow: auto;
		border-right: 1px solid #d9d9d9;
		transition: margin-left ease 0.5s;
		&.hide {
			margin-left: -28rem;
			border: 0;
		}

		.project-list {
			position: relative;
			flex: 1 1 auto;
			overflow: auto;
			padding: 0 .2rem 2rem .2rem;

			.new-project {
				input {
					@include normal-ipt;
				}
			}

			.project-list__li {
				background-color: transparent;
				padding: 0 0.4rem;
				border-bottom: 0;
				transition: all linear 0.2s;
				border-radius: 0.5rem;

				&:hover {
					background-color: $noteLiHoverBg;
					.project-list__item {
						color: $noteLiActiveColor;
						border-bottom: 1px solid transparent;

						.project-list__item__name {
							h3 {
								color: $noteLiActiveColor;
							}
							input {
								color: $noteLiActiveColor;
							}
						}
					}
				}
				&.cur {
					background-color: $noteLiActiveBg;

					.project-list__item {
						color: $noteLiActiveColor;
						border-bottom: 1px solid transparent;

						.project-list__item__name {
							h3 {
								color: $noteLiActiveColor;
							}
							input {
								color: $noteLiActiveColor;
							}
						}
					}
				}

				&:last-child {
					.project-list__item {
						border-bottom: 1px solid transparent;
					}
				}
			}

			.project-list__item {
				@include display-flex;
				@include project-item;
				border-bottom: 1px solid rgba(255, 204, 204, 1);

				.project-list__item__icon {
					flex: 0 0 1.3rem;
					font-size: 1.2rem;
					text-align: center;
				}

				.project-list__item__name {
					flex: 1 1 auto;
					position: relative;
					@include text-ellipsis;
					padding: 0 0.2rem;
					h3 {
						opacity: 1;
						font-size: 0.9rem;
						padding: 0 0.2rem;
						color: rgba(0, 0, 0, 0.5);
						cursor: pointer;
						margin-bottom: 0;
						font-weight: normal;
						@include text-ellipsis;
					}
					input {
						@include normal-ipt;
						background-color: inherit;
						border: 1px solid transparent;

						&.edit {
							border: 1px solid #d9d9d9;
						}
					}
				}
			}
		}
	}

	.file-explorer {
		position: relative;
		flex: 0 0 15rem;
		overflow: auto;
		border-right: 1px solid rgb(217, 217, 217);
		transition: margin-left ease 0.5s;

		&.hide {
			margin-left: -28rem;
			// flex-basis: 0;
			border: 0;
		}

		.file-list {
			position: relative;
			flex: 1 1 auto;
			overflow: auto;
			padding: 0 .3rem 4rem .3rem;
		}

		.file-list__item {
			height: 6.6rem;
			position: relative;
			border-radius: 0.5rem;
			transition: background-color linear 0.2s;

			.clouds {
				position: absolute;
				width: 2.4rem;
				height: 100%;
				z-index: 999;
				top: 0;
				right: 0;
				@include display-flex;
				flex-direction: column;
				justify-content: center;

				.clouds-item {
					width: 2rem;
					height: 2rem;
					border-radius: 50%;
					background-color: rgba(222, 184, 135, 0.5);
					text-align: center;
					opacity: 0.5;
					position: relative;
					box-shadow: 2px 2px 1rem rgba(0, 0, 0, 0.5);

					&:after {
						top: 0;
						right: 0;
						content: "";
						position: absolute;
						width: 0.6rem;
						height: 0.6rem;
						border-radius: 0.6rem;
					}

					&.fail {
						&:after {
							background-color: #ff0000;
						}
					}

					&.need-upload {
						&:after {
							background-color: #2f3554;
						}
					}

					&.success {
						&:after {
							display: none;
						}
					}

					&.upload {
						.cloud-logo {
							filter: blur(0.2rem);
							-webkit-filter: blur(0.2rem);
						}
						&:after {
							display: none;
						}

						.anticon-loading {
							font-size: 1.2rem;
							position: absolute;
							top: 50%;
							left: 50%;
							color: #ffffff;
							transform: translate(-50%, -50%);
						}
					}

					img {
						height: 1.8rem;
						width: 1.8rem;
					}
				}
			}

			&:hover {
				background-color: $fileLiHoverBg;
				.file-list__item__name {
					.ant-input {
						color: $noteLiActiveColor;
					}
					h3 {
						color: $noteLiActiveColor;
					}

				}
				.file-list__item__info__desc {
					p {
						color: $noteLiActiveColor;
					}
				}
				.clouds {
					.clouds-item {
						background-color: #f7f8f9;
						&.need-upload {
							&:after {
								background-color: #83cc0e;
							}
						}
					}
				}
				.file-list__item__icon {
					svg {
						fill: $noteLiActiveColor;
					}
				}
			}
			&.cur {
				background-color: $fileLiActiveBg;
				.ant-input {
					color: $noteLiActiveColor;
				}
				.file-list__item__name {
					h3 {
						color: $noteLiActiveColor;
					}

				}
				.file-list__item__info__desc {
					p {
						color: $noteLiActiveColor;
					}
				}
				.clouds {
					.clouds-item {
						background-color: #f7f8f9;
						&.need-upload {
							&:after {
								background-color: #83cc0e;
							}
						}
					}
				}
				.file-list__item__icon {
					svg {
						fill: $noteLiActiveColor;
					}
				}
			}

			.file-list__item__root {
				@include display-flex;
				height: 3rem;
				padding: 0 0.4rem;
			}

			.file-list__item__info {
				height: 3.6rem;
				padding: 0 0.4rem;
				border-bottom: 1px solid rgba(255, 204, 204, 0.5);
			}

			.file-list__item__info__desc {
				height: 1.2rem;

				.ant-input {
					@include normal-ipt;
					display: block;
					font-size: .8rem;
					height: 1.2rem;
					background-color: inherit;
					border: 1px solid transparent;
					border: 1px solid #d9d9d9;
					display: block;
					border-radius: 0.1rem;
				}

				p {
					height: 1.2rem;
					font-size: .8rem;
					line-height: 1.2rem;
					color: rgba(0, 0, 0, 0.4);
					margin: 0;
					@include text-ellipsis;
				}
			}

			.file-list__item__icon {
				flex: 0 0 2rem;

				svg {
					width: 2rem;
					height: 3rem;
					fill: #ff6666;

					use {
						width: 100%;
						height: 100%;
					}
				}
			}

			.file-list__item__name {
				flex: 1 1 auto;
				line-height: 3rem;
				position: relative;
				@include text-ellipsis;
				padding: 0 0.1rem;

				h3 {
					font-size: 0.9rem;
					padding: 0 0.2rem;
					color: rgba(0, 0, 0, 0.5);
					cursor: pointer;
					margin-bottom: 0;
					@include text-ellipsis;
				}

				.ant-input {
					@include normal-ipt;
					font-size: .9rem;
					background-color: inherit;
					border: 1px solid transparent;

					&.edit {
						border: 1px solid #d9d9d9;
					}
				}
			}
		}
	}

	.tips {
		position: absolute;
		top: 30%;
		text-align: center;
		height: 1.5rem;
		line-height: 1.5rem;
		text-align: center;
		width: 100%;
		font-size: 0.95rem;
		color: #b3b3b3;
		font-weight: lighter;
	}

	.markdown {
		flex: 1 1 auto;
		@include display-flex;
		flex-direction: column;
		width: 100%;
		transition: margin-left ease 0.5s;
	}

	.markdown-content {
		flex: 1 1 auto;
		@include display-flex;
		border-top: 1px solid #d9d9d9;
		overflow: hidden;
		position: relative;
	}

	.preview-root {
		position: relative;
		flex: 1;
		width: 0;
		min-width: 10rem;
		transition: width ease 0.5s;

		.preview-loading {
			position: absolute;
			top: 20%;
			max-width: 100%;
			left: 50%;
			transform: translateX(-50%);
		}

		.preview-webview {
			width: 100%;
			height: 100%;
			outline: 0;
			overflow: auto;
			display: inline-flex !important;
		}

		.wv-dev-tools {
			position: absolute;
			top: 50%;
			right: .5rem;
			font-size: 0.7rem;
			padding: 0.3rem;
			background-color: #999;
			color: #ffffff;
			opacity: .3;
			border-radius: 3px;
			cursor: pointer;

			&:hover {
				background-color: #83cc0e;
			}
		}

		&.drag {
			transition: width ease 0s;
		}

		&.hide {
			min-width: 0;
			width: 0;
			padding: 0;
		}
	}

	.editor-root {
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		border-right: 1px solid #d9d9d9;
		min-width: 10rem;
		transition: width, flex-basis ease 0.5s;
		background-color: rgba(248, 248, 248, 1);
		overflow: hidden;

		.code-container {
			position: relative;
			padding: 8px 0 0 8px;
			background-color: #fcfdfe;
		}

		&.hide {
			min-width: 0;
			border-right: 0;
		}

		&.no-border {
			border: 0;
		}

		&.write-mode {
			padding: 0.7rem;
		}

		.text {
			border: 0;
			width: 100%;
			height: 100%;
			background: rgba(248, 248, 248, 1);
			border-radius: 0;
			max-width: 100%;
			min-width: 10rem;
			vertical-align: bottom;
			transition: all .3s, height 0s;
			color: rgba(0, 0, 0, 0.65);
			line-height: 1.5;
			padding: .3rem;
			font-size: 0.98rem;
			resize: none;

			&:focus {
				border: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
				outline: 0;
			}
		}
		.ant-input {
			border: 0;
			height: 100%;
			background: rgba(246, 206, 205, 0.15);
			border-radius: 0;

			&:focus {
				border: 0;
				-webkit-box-shadow: none;
				box-shadow: none;
			}
		}
	}
}

.height-block {
	height: 100%;
	margin: 0;
}

.fade-in {
	animation: fade-in .5s;
	-webkit-animation: fade-in .5s;
}

.toc-popover {
	.ant-popover-inner-content {
		padding: 0;
	}
}

/* TOC card style */
.toc-content {
	position: relative;
	width: 12rem;
	height: 16rem;
	font-size: 14px;
	overflow: auto;
	user-select: none;

	.toc-list {
		width: 100%;
		overflow-y: auto;
		padding: 0.6rem 0;
		margin-bottom: 0;

		.toc-item {
			padding: 0.1em 1em;
			width: 100%;
			@include text-ellipsis;
			cursor: pointer;
			&:hover {
				background-color: rgba(46, 128, 254, 0.8);
				color: #ffffff;
			}
		}
	}

	.tips {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		text-align: center;
	}

	.header-label {
		margin-right: 0.3em;
		opacity: 0.6;
	}
}

.edit-mode-popover {
	.mode-wrap {
		position: relative;
		width: 6rem;
	}

	.mode-list {
		@include display-flex;
		width: 6rem;
		margin: 0 auto;

		.mode-item {
			flex: 1 1;
			width: 12rem;
			padding: 0 .2rem;
			cursor: pointer;

			svg {
				stroke: #727272;
				fill: #727272;
			}
		}
	}

	.mode-ink {
		position: absolute;
		bottom: 0;
		left: 0;
		@include zoom-in(1);
		height: 1px;
		background-color: #f04134;
		transform: translateX(0);
		transition: transform .3s cubic-bezier(.645, .045, .355, 1);
	}
}
